<template>
	<view class="xcs">
		<view class="heboxcs">
			<view class="adf">
				<view class="movtxt">{{ cinemaNames }}</view>
				<view>
					<uni-icons type="location" size="20" color="#fff"  class="icont" @click="gomap(cinmovie)"></uni-icons>
					<uni-icons type="phone" size="20" color="#fff" @click="callphone(phones)"></uni-icons>
				</view>
			</view>
			<view class="jcs">
				<view class="xcuyt">
					<view class="leftmovcss">
						<view class="dytxt">
							<text class="dytxt1">{{showVos.filmName}}</text>
							<text class="dytxt2">{{showVos.language}} {{chosenSeats.length}}张</text>
						</view>
						<view class="timzwo">
							{{formatDate(showVos.showTime)}}
							{{formatTime(showVos.showTime)}} ~ {{formatTime(showVos.closeTime)}}
							{{ showVos.hallName }}
						</view>
						<view class="film-text"> 
							<view v-for="(value,index) in chosenSeats" :key="index" class="zusn">
								<text> {{value.seatName}}</text>
								<text v-if="index < chosenSeats.length - 1">，</text>
							</view>
						</view>
					</view>
					<image :src="pics" mode="scaleToFill" class="imgmvo"></image>
				</view>
			</view>
			<view class="circle xyl"></view>
			<view class="circle xyr"></view>
		</view>
		<view class="botyucss">
			<swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="500" class="wiper" v-if="codes.length>0">
			    <swiper-item v-for="(code, index) in codes" :key="index">
			        <view class="swiper-item">
					  <uvqrcode size="180" ref="quv" canvas-id="qrcode" :value="code"></uvqrcode>
			        </view>
			    </swiper-item>
			</swiper>
			<view class="titxt" v-else> {{orderInfo.message}} </view>
		</view>
	</view>
</template>

<script setup>
	import { ref , onMounted } from 'vue';
	import { onShow , onLoad } from '@dcloudio/uni-app';
	import { apiGordrinfo , apiChamovie } from '@/api/upapi.js';
	import dayjs from 'dayjs';
	import uvqrcode from '@/uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode';
	import uvsticky from '@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky';
	
	const orderInfo = ref({});
	const codes = ref({});
	const cinemaNames = ref('');
	const phones = ref('');
	const pics = ref('');
	const showVos = ref({});
	const chosenSeats = ref({});
	const cinmovie = ref({});
	
	const formatDate = (date) => {
	    return dayjs(date).format('MM-DD'); 
	};
	const formatTime = (date) => {
	    return dayjs(date).format('HH:mm'); 
	};
	const callphone = (e) => {  uni.makePhoneCall({ phoneNumber: e }); };
	const lookorder = async(e) =>{
		try {
			let res = await apiGordrinfo({ outOrderSn:e });
			if(res.data.result==0){
				var data = res.data.object;
				getCinema(data.cinemaInfo.cityId,data.cinemaInfo.cinemaId)
				orderInfo.value = data;
				cinemaNames.value=data.cinemaInfo.cinemaName;
				phones.value=data.cinemaInfo.phone;
				pics.value=data.movieInfo.pic;
				showVos.value=data.showVo;
				chosenSeats.value=data.chosenSeat;
				if(data.ticketContent){
					codes.value = data.ticketContent.split(',');
				}
			}else{
				uni.showToast({ title: res.data.msg,icon:'none' });
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const getCinema = async(c,d)=>{
		try {
			let res = await apiChamovie({ cityId:c,cinemaId:d });
			if(res.data.result==0){
				cinmovie.value=res.data.object;
			} else{
				uni.showToast({ title: res.data.msg, icon:'none' });
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const gomap=(a)=>{
		uni.openLocation({
			longitude: Number(a.longitude),
		    latitude: Number(a.latitude),
		    name: a.cinemaName,
		    address: a.address,
		    success: function (res) { },
			fail: function (error) { }
		})
	};

	onLoad((option) => {
		lookorder(option.id)
	});
</script>

<style scoped lang="scss">
	.xcs{
		padding: 30rpx;
		.heboxcs{
			background-color: #1c2e4a;
			border-radius: 30rpx 30rpx 0 0;
			position: relative;
			border-bottom: 2rpx dashed #fff;
			.adf{
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.movtxt{
					font-size: 26rpx;
					color: #fff;
				}
				.icont{
					margin-right: 30rpx;
				}
			}
			.circle {
			    position: absolute;
			    width: 30rpx;
			    height: 30rpx; 
			    border-radius: 15px;
			    background: #f5f5f5;
			}
			.xyl{
				left: -15rpx;
				bottom: -15rpx;
				z-index: 2;
			}
			.xyr{
				right: -15rpx;
				bottom: -15rpx;
				z-index: 2;
			}
			.jcs{
				background-color: #fff;
				padding: 30rpx;
				border-radius: 20rpx 20rpx 0 0;
				.xcuyt{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				
				.leftmovcss{
					flex: 1;
					height: 180rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-right: 20rpx;
					.dytxt{
						display: flex;
						flex-direction: column;
						.dytxt1{
							font-weight: 600;
							font-size: 28rpx;
						}
						.dytxt2{
							font-size: 24rpx;
							margin-top: 10rpx;
							color: #636363;
						}
					}
					.timzwo{
						display: flex;
						align-items: center;
						font-size: 22rpx;
						color: #878787;
					}
					.zwxq{
						font-size: 22rpx;
						color: #878787;
						margin:0 20rpx;
					}
					.film-text{
						display: flex;
						align-items: center;
						.zusn{
							font-size: 26rpx;
							color: #2f2f2f;
						}
					}
				}
				.imgmvo{
					width: 140rpx;
					height: 180rpx;
					border-radius: 10rpx;
				}
			}
		}
		.botyucss{
			background-color: #fff;
			padding: 30rpx;
			border-radius:  0 0 30rpx 30rpx ;
			.wiper{
				height: 420rpx;
			}
			.titxt{
				font-size: 24rpx;
				text-align: center;
				color: #878787;
			}
		}
		.swiper-item{
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>